import React from 'react';
import './Modal.css'; // Assuming a common CSS for modals

interface LoadingModalProps {
    isVisible: boolean;
    progress: number;
}

const LoadingModal: React.FC<LoadingModalProps> = ({ isVisible, progress }) => {
    if (!isVisible) return null;

    return (
        <div id="loadingModal" className="modal">
            <div className="modal-content loading-content">
                <div className="loading-spinner"></div>
                <h3>正在同步你的订阅数据...</h3>
                <p className="loading-text">这可能需要几分钟时间，请耐心等待</p>
                <div className="loading-progress">
                    <div className="progress-bar">
                        <div className="progress-fill" style={{ width: `${progress}%` }}></div>
                    </div>
                    <p className="progress-text">已同步 <span>{progress}</span>/100 个频道</p>
                </div>
            </div>
        </div>
    );
};

export default LoadingModal;
